<template>
  <div id="wrapper">
    <nav class="top">
      <a @click="back()">
        <img class="left" src="../../assets/img/img.../xingzhuang164.png" alt="">
      </a>
      <span class="wenzi">我的神灯值</span>

      <a href="">
        <img class="right2" src="../../assets/img/personal/liaotiantubiao.png" alt="">
      </a>
      <!--神灯规则-->
      <div class="gui">
        <a href="">
          <img src="../../assets/img/img.../xingzhuang2.png" alt="">
          神灯规则
        </a>
      </div>
      <!--昵称头像-->
      <div class="ni">
      <a  href="">
        <img class="bgtu" src="../../assets/img/personal/touxiang.png" alt="">
        <p>昵称</p>
        <p class="number">100</p>
        <span><img src="../../assets/img/img.../shengdeng222.png" alt=""></span>
      </a>
      </div>
      <!--今年购物抵钱已省-->
      <div class="year">
          <p class="year-lef">今年购物抵钱已省</p>
          <p class="year-left">0</p>

            <p class="year-righ">今年神灯值抵扣订单</p>


          <p class="year-right">0笔</p>


      </div>
    </nav>
      <hr>
      <!--兑换记录-->
      <div class="dui">
        <img class="img1" src="../../assets/img/img.../xingzhuang4.png" alt="">
        <span>兑换记录</span>
        <img class="img-top" src="../../assets/img/img.../xingzhaung162.png" alt="">
      </div>
      <hr>
      <!--神灯值明细-->
      <div class="ming">
        <img  class="img2" src="../../assets/img/img.../xingzhaung1.png" alt="">
        <span>神灯值明细</span>
          <img  class="img-bot" src="../../assets/img/img.../xingzhaung162.png" alt="">
      </div>

      <hr>

  </div>
</template>
<script>
  export default {


    methods:{
      back(){
        this.$router.go(-1);
      }
    }
  }
</script>
<style scoped>
  .top{
    width: 100%;
    height: 10.5rem;
    background-color: #e53e42;
  }
  .top{
    position: relative;
  }
  .left{
    width:0.7rem;
  }
  .wenzi{
    font-family: MicrosoftYaHei;
    font-size: 0.89rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 2.25rem;
    letter-spacing: 0.04rem;
    color: white;
    position: absolute;
    top: 1rem;
    left: 6rem;
  }
  img{
    width: 1rem;
  }
  .left {
    position: absolute;
    top: 1.5rem;
    left: 0.7rem;
  }
  .right2{
    position: absolute;
    top: 1.5rem;
    left: 14rem;
  }
  .gui img{
    width: 0.8rem;
  }
  .gui a{
    font-size:0.6rem;
    color: white;
    position: absolute;
    left:12rem;
    top:3rem;
  }
  .ni a{
    font-size: 0.7rem;
    position: absolute;
    left: 6.7rem;
    top:3rem;
    color: white;
    text-align: center;
  }
  .ni .bgtu{
    width:2rem;

  }
  .ni a .number{
    font-size:1.5rem;
    color: gold;
    font-weight:200;
  }
  .ni a span img{
    position: absolute;
    left: 2.8rem;
    top:4.2rem;
  }
  /*今年购物抵钱已省*/
  .year{
    position: relative;
  }
  .year p{

    font-size:0.6rem;
    color: white;
    font-weight:100;
    position: absolute;
    left: 2.4rem;
    top:9rem;
  }
  .year .year-left {
    font-size:0.6rem;
    color: white;
    font-weight:100;
    position: absolute;
    left: 4rem;
    top:9.7rem;
  }
  .year .year-righ{
    font-size:0.6rem;
    color: white;
    font-weight:100;
    position: absolute;
    left: 9rem;
    top:9rem;
  }
  .year .year-right{
    font-size:0.6rem;
    color: white;
    font-weight:100;
    position: absolute;
    left: 11rem;
    top:9.7rem;
  }
  /*兑换记录*/
   .dui, .ming {
     width: 100%;
     height: 1.9rem;
     font-size:0.69rem;
     color: grey;
   }
   .dui .img-top{
     margin-left: 9.5rem;
     width:0.37rem;
   }
   .img1, .img2{
     margin-left: 0.4rem;
     margin-top: 0.4rem;
   }
  /*神灯值明细*/
  .ming .img-bot{
    margin-left: 8.7rem;
    width:0.37rem;
  }
</style>

